<template>
	<!-- 登录 -->
	<view class="login">
		<view class="header"></view>
		<view class="main">
			<view class="title-login">
				<view class="">
					登录
				</view>
				<view class="">
					使用申请骑手手机号短信验证登录
				</view>
			</view>
			<view class="input-item">
				<view class="input-item-left">
					+86
				</view>
				<view class="input-item-right">
					<input type="number" maxlength="11" placeholder="请输入手机号码" v-model="phone">
					<uni-icons type="clear" color="#EAEAEA" size="35rpx"></uni-icons>
				</view>
			</view>
			<view class="input-itemCode">
				<view class="input-item-left">
					<input type="text" placeholder="请输入验证码">
				</view>
				<view class="input-item-right">
					<!-- <text @click="eventObtainCode">{{isObtainCode ? '重新获取' + obtainCode + 's' : '获取验证码'}}</text> -->
					<button class="obtainCode" @click="eventObtainCode" :disabled="isObtainCode">{{isObtainCode ? '重新获取' + obtainCode + 's' : '获取验证码'}}</button>
				</view>
			</view>
			<view class="login-button">
				 <!-- @click="login" -->
				<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">登录</button>
			</view>
			<view class="agreement">
				<radio-group v-model="agreeWith" @click="agreement">
					<label>
						<radio :checked="agreeWith" style="transform: scale(0.7);" /><text>我已阅读同意</text>
					</label>
				</radio-group>
				<view class="">
					《用户协议》
				</view>和
				<view class="">
					《隐私保护政策》
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const $api = require('@/utils/request.js').API
	export default {
		data(){
			return {
				phone: '',
				agreeWith: false,
				obtainCode: 60,
				isObtainCode: false,
				code:'',
			}
		},
		methods: {
			getPhoneNumber(){
				// uni.login({
				// 	provider:'weixin',
				// 	success:function(loginRes) {
				// 		$api.postOpenId({}).then(res => {
				// 		})
				// 	}
				// })
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						this.code = loginRes.code
						let obj = {
							code: loginRes.code
						}
						$api.postOpenId(obj).then(res => {
							if (res.data.code == 0) {
								this.openId = res.data.data.openid
								
								$api.postPhoneLogin({
									weapp_openid: res.data.data.openid,
									code: this.code,
								}).then(res => {
									if(res.data.code == 0) {
										uni.setStorage({
											key:'token',
											data:res.data.data.token,
											success(res) {
												// uni.switchTab({
												// 	url:'../../pages/my/myView'
												// })
											}
										})
									}
								})
							}
						})
						
					}
				});
			},
			eventObtainCode(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if(reg.exec(this.phone)){
					if(this.agreeWith == true) {
						this.packSetInterval()	
					} else {
						uni.showToast({
							title:'请勾选用户协议',
							icon:'none',
							duration:2000
						})
					}
				} else {
					uni.showToast({
						title:'请输入正确格式的手机号',
						icon:'none',
						duration:2000
					})
				}
			},
			packSetInterval() {
				this.isObtainCode = true
				let countdown = setInterval(() => {
					this.obtainCode--;
					// this.obtainCode = `重新获取${this.obtainCode}S`
					if(this.obtainCode <= 0) {
						clearInterval(countdown)
						this.obtainCode = 60
						this.isObtainCode = false
					}
				},1000)
			},
			// 协议
			agreement(){
				this.agreeWith = !this.agreeWith
			}
		}
	}
</script>

<style lang="less" scoped>
	.login {
		.header {
			width: 750rpx;
			height: 404rpx;
			background: url('../static/loginBack.png') no-repeat;
			background-size: 100% 100%;
		}
		.obtainCode {
			color: #F14500;
			font-size: 30rpx;
			background: #FFFFFF;
			border: 1px solid #FFFFFF;
		}
		.main {
			width: 688rpx;
			margin: auto;
			.title-login{
				font-size: 48rpx;
				font-weight: 600;
				color: #161415;
				view:last-child {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #858585;
					padding-top: 10rpx;
				}
			}
			.input-item {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #EAEAEA;
				padding: 65rpx 0 32rpx 0;
				input {
					font-size: 30rpx;
					font-weight: 400;
					color: #7A7A7A;
				}
				.input-item-left {
					font-size: 30rpx;
					font-weight: 600;
					color: #000000;
					padding-right: 39rpx;
				}
				.input-item-right {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					padding-right: 10rpx;
					input {
						width: 90%;
					}
				}
			}
			.input-itemCode {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #EAEAEA;
				padding: 65rpx 0 32rpx 0;
				input {
					font-size: 30rpx;
					font-weight: 400;
					color: #7A7A7A;
					padding-left: 20rpx;
				}
				text {
					font-size: 30rpx;
					font-weight: 400;
					color: #F14500;
					padding-right: 10rpx;
				}
			}
			.login-button {
				padding-top: 202rpx;
				button {
					width: 604rpx;
					height: 78rpx;
					background: #F14500;
					border-radius: 39rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			// 协议
			.agreement {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				font-weight: 400;
				color: #6E6E6E;
				// padding-top: 41rpx;
				padding-top: 30rpx;
				view {
					color: #F14500;
				}
			}
		}
	}
</style>